﻿@{
    Layout = "~/Areas/Mall/Views/Shared/_HomeLayout.cshtml";
    var categoryList = ViewData["categoryList"] as List<CategoryOutput>;
}

<link rel="stylesheet" href="~/Areas/Mall/css/head.css">
<link rel="stylesheet" href="~/Areas/Mall/css/store.css">
<link rel="stylesheet" href="~/Areas/Mall/css/pagination.css" />
<style type="text/css">
    ul, li {
        list-style: none;
    }

    #wrapper {
        width: 900px;
        margin: 20px auto;
    }

    .data-container {
        margin-top: 5px;
    }

        .data-container ul {
            padding: 0;
            margin: 0;
        }

        .data-container li {
            margin-bottom: 5px;
            padding: 5px 10px;
            background: #eee;
            color: #666;
        }
</style>
<div class="store">
    <div class="location">
        <a href="javascript:history.back(-1);" class="back"><i></i><span>返回上一页</span></a>
        <a href="@Url.Action("Index","Home")"><i></i><span>首页</span></a>
        <span> - 进货商城</span>
    </div>
    <div class="top">
        <select id="selCategory">
            <option value="">所有类别</option>
            @if (categoryList != null && categoryList.Count > 0)
            {
                foreach (var item in categoryList)
                {
                    <option value="@item.Id">@item.Name</option>
                }
            }
        </select>
        <input id="txtKeyword" value="" />
        <button id="btnSearch" onclick="paging()"><img src="~/Areas/Mall/image/search.png" width="20" /></button>
    </div>
    <div class="content">

    </div>
    <div id="wrapper" class="page">
        <!--#488FCD-->
    </div>
</div>
<script type="text/javascript" src="~/Areas/Mall/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Areas/Mall/js/pagination.min.js"></script>
<script type="text/javascript">
    //分页
    function paging() {
        $('#wrapper').pagination({
            dataSource: '@Url.Action("CommodityList", "Commodity")',
            locator: 'Data.List',
            totalNumberLocator: function (response) {
                // you can return totalNumber by analyzing response content
                return response.Data.Count;
            },
            pageSize: 10,
            ajax: {
                beforeSend: function () {
                    //dataContainer.html('Loading data from flickr.com ...');
                },
                type: 'POST',
                data: {
                    categoryId: $("#selCategory").val(),
                    keyword: $("#txtKeyword").val()
                }
            },
            callback: function (data, pagination) {
                $(".content").empty();
                $(data).each(function (index, item) {
                    $(".content").append(`
                    <div class="item" id="`+ item.Id + `">
                        <img src="`+ item.Pic + `" />
                        <div class="foot" style="height: 40px;">
                            <p>`+ item.Name + `</p>
                            <p class="button"><a href="@Url.Action("Detail", "Commodity")?id=`+ item.Id + `" title="立即订购">立即订购</a></p>
                        </div>
                    </div>`);
                });
            }
        });
    }

    $(function () {
        paging();
    })

</script>